<template>
  <div class="erp-home">
    <el-container class="header-container">
      <el-header>
        <h1>ERP 系统主页</h1>
      </el-header>
    </el-container>
    <el-container class="content-container">
      <el-main>
        <div class="function-section">
          <h2>主要功能介绍</h2>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="function-card">
                <h3>采购管理</h3>
                <p>负责采购订单的创建、审批、跟踪，与供应商管理等功能，确保采购流程的高效和合规。</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="function-card">
                <h3>生产管理</h3>
                <p>涵盖生产计划制定、生产任务分配、生产进度监控，以及产品质量控制等，优化生产过程。</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="function-card">
                <h3>销售管理</h3>
                <p>包括客户管理、销售订单处理、销售业绩统计，帮助提升销售效率和客户满意度。</p>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-card class="function-card">
                <h3>库存管理</h3>
                <p>实现库存的实时监控、库存盘点、出入库管理，合理控制库存水平，降低库存成本。</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="function-card">
                <h3>财务管理</h3>
                <p>处理财务核算、成本控制、预算管理、财务报表生成等，为企业财务决策提供支持。</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="function-card">
                <h3>人力资源管理</h3>
                <p>涵盖员工档案管理、考勤管理、薪酬福利管理、培训发展等，提升人力资源管理效率。</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 这里可以添加一些页面加载时的逻辑，比如获取数据等
// 目前该示例无额外逻辑
</script>

<style scoped>
.erp-home {
  font-family: Arial, sans-serif;
}

.header-container {
  background-color: #333;
  color: white;
  text-align: center;
}

.header-container el-header {
  padding: 20px;
  margin: 0;
}

.content-container {
  padding: 20px;
}

.function-section h2 {
  margin-bottom: 20px;
}

.function-card {
  text-align: left;
  padding: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.function-card h3 {
  margin-bottom: 10px;
}
</style>